<template>
  <div class="search-dialog" id="local-search" style="display: block;">
    <div id="local-search-results">
      <div id="local-hits">
        <div class="search-result-list">
          <div class="local-search__hit-item" :key="item.hid" v-for="item in list">
            <router-link :to="{path:'/posts/'+item.hid}" class="search-result-title">{{ item.title }}</router-link>
            <p class="search-result">
              <span class="search-keyword">&nbsp;&nbsp;</span>
              {{ item.summary }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div id="pagination">
      <div class="pagination">
        <pagination :total="total" v-if="total!==0" :limit="listQuery.size" @getNew="fetchData" />
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { articleSearch } from '@/api/article'

export default {
  name: 'Search',
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        page: 0,
        size: 10,
        title: ''
      }
    }
  },
  watch: {
    $route() {
      this.fetchData()
    }
  },
  created() {
    document.title = '搜索'
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listQuery.title = this.$route.query.title
      articleSearch(this.listQuery).then(response => {
        if (response.data.code === 20000) {
          this.total = response.data.payload.total
          this.list = response.data.payload.list
        }
      })
    }
  }
}
</script>

<style>
  #local-search .local-search__hit-item {
    position: relative;
    padding-left: 1.3rem;
    line-height: 1.7;
  }

  #local-search .local-search__hit-item:before {
    position: absolute;
    top: .3rem;
    left: 0;
    width: .3rem;
    height: .3rem;
    border: .15rem solid #49b1f5;
    border-radius: .3rem;
    background: 0 0;
    content: '';
    line-height: .3rem;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  }

</style>
